<template>
    <div class="container">
        <!-- 内容切换 -->
        <div style="height: 15rpx;"></div>
        <view class="head-nav">
            <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)">经验</view>
            <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)">维保</view>
        </view>
        <div v-if="list.length == 0">
            <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
            </u-empty>
        </div>
        <div v-for="item in list">
            <div class="card">
                <div style="width: 95%;margin-left: 2.5%;">
                    <div style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2FGroup%202408.png" class="img" />
                        <div style="width: 2%;"></div>
                        <div>
                            <div style="font-size: 15px;color: #1A512C;font-weight: 500;">昵称</div>
                            <div style="height: 5rpx;"></div>
                            <div style="color: #8E8E8E;font-size: 13px;">{{ item.createTime }}</div>
                        </div>
                    </div>
                    <div style="height: 5px;"></div>
                    <div class="title">{{ item.adviceTitle }}</div>
                    <div style="height: 10rpx;"></div>
                    <div style="font-size: 13px;color: #2A4533;">{{ item.adviceContent }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { adviceList } from '../api/api.js';
export default {
    data() {
        return {
            indent: '',
            list: [],
            navIndex: 0,
            adviceType: 2
        };
    },
    methods: {
        aList() {
            adviceList({
                adviceType: this.adviceType
            }).then(res => {
                console.log(res, 'adviceList');
                if (res.data.code == 200) {
                    this.list = res.data.rows;
                    console.log(this.list, 'list');
                    // 1维保2经验

                }
            })
        },
        checkIndex(i) {
            if (i == 0) {
                this.adviceType = 2;
                this.navIndex = i;
                this.aList()
            } else {
                this.adviceType = 1;
                this.navIndex = i;
                this.aList()
            }

        }
    },
    onLoad() { },
    onShow() {
        this.indent = uni.getStorageSync('pageIndent');
        this.aList();
    }
};
</script>
<style lang="scss">
.container {
    height: 100vh;
    width: 100vw;
    background: #E3EDE2;
    color: #1a512c;
    overflow-y: scroll;
}

.card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #f4f9f3;
    padding-top: 10px;
    padding-bottom: 10px;
}

.head-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.activite {
    border-bottom: 2px solid #1a512c;
}
.title{
    color: #18512c;
    font-weight: 700;
    font-size: 15px;
}
.img{
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
}
</style>